<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="my-header" style="position: fixed;z-index:999">
		<myheader showBackground="white" :isShowLogo="true"></myheader>
		</view>
		<!-- #endif -->
		 <scroll-view :scroll-y="true" :style="{marginTop: headerHight+'px'}" @scroll="scroll" :scroll-top="scrollTop" @scrolltolower="onBottom" :scrollbar="false" :scroll-with-animation="true" style="height:calc(100vh - 150px)">
			
			<!--  -->
			<view class="box" style="background-color: #fff;">
				
				<view class="yinshi">
					<view class="yinshi-1">
						<view class="yinshi-1-1">
							
						用Ai指导三餐饮食，保持和改善健康。
						</view>
						<view class="yinshi-1-2">
							订阅适合你的膳食方案，
						</view>
						<view class="yinshi-1-2">
							Ai 提供符合营养健康需求的三餐推荐。
						</view>
					</view>
					<view class="yinshi-box">
						<view class="yinshi-box-item">
							<view class="yinshi-box-item-1">找健康顾问</view>
							<view class="yinshi-box-item-2">咨询、定制膳食方案</view>
						</view>
						<view class="yinshi-box-line"></view>
						<view class="yinshi-box-item">
							<view class="yinshi-box-item-1">找膳食方案</view>
							<view class="yinshi-box-item-2">看一下有哪些适合你的</view>
						</view>
					</view>
				</view>
				<view class="tuijian">
					<view class="tuijian-item">
						<view class="tuijian-item-top">
							<view class="tuijian-item-top-1">健康顾问推荐</view>
							<view class="tuijian-item-top-2">
								<image src="../../static/index/more.svg" style="width: 42px;height:22px"  />
							</view>
						</view>
						<view class="tuijian-item-bottom">
							<image class="tuijian-item-bottom-1"  src="../../static/index/1.png" />
							<view class="tuijian-item-bottom-2">
								<view class="tuijian-item-bottom-2-1">代用名</view>
								<view class="tuijian-item-bottom-2-2">一级注册营养师</view>
								<view class="tuijian-item-bottom-2-3">立即订阅</view>
							</view>
						</view>
					</view>
					<view class="tuijian-item">
						<view class="tuijian-item-top">
							<view class="tuijian-item-top-1">膳食方案推荐</view>
							<view class="tuijian-item-top-2">
								<image src="../../static/index/more.svg" style="width: 42px;height:22px"  />
							</view>
						</view>
						<view class="tuijian-item-bottom">
							<image class="tuijian-item-bottom-1" src="../../static/index/2.png" />
							<view class="tuijian-item-bottom-2">
								<view class="tuijian-item-bottom-2-4">皮肤抗皱/抗松弛「饮食...</view>
								<view class="tuijian-item-bottom-2-3">立即订阅</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content" style="background-color: #fff;">
				<view class="tishi">
					<view class="tishi-1">你的专属「适宜饮食」推荐</view>
					<view class="tishi-2" >本结果由吃巧Ai提供，按你订阅的全部膳食方案生成。</view>
					
				</view>
			</view>
			 <view v-if="storeList.length>0">
				 <scroll-view :scroll-x="true" :scrollbar="false"
					 style="width: calc(100% - 10px); white-space: nowrap;background-color: #fff;flex-wrap: nowrap; display: flex;justify-content: flex-start;align-items: flex-end;padding-left: 10px;">
					 <view :class="isAllStore==1?'serviceItem-select  bg-00BC7A':'serviceItem'" @click="setAllStore()" style="border:none">
						 <view :class="[isAllStore==0 ? 'bg-00BC7A': 'bg-ffffff']" 
							 style="border-radius: 10px;display: flex;flex-direction: column;justify-content: center;align-items: center; height: 56px;width: 56px;margin-right: 5px;">
							 <view>
								 <image v-if="isAllStore==1" src="../../static/juhe1.svg" mode="scaleToFill"
									 style="width: 24px;height: 24px;border-radius: 10px;" />
									 <image v-else src="../../static/juhe.svg" mode="scaleToFill"
									 style="width: 24px;height: 24px;border-radius: 10px;" />
							 </view>
							 <view :class="[isAllStore==1 ? 'color-00BC7A': 'color-fff']" style="font-size: 12px;font-weight: 700;">聚合服务</view>
						 </view>
					 </view>
					 <view
						 :class="(isAllStore==0&&searchOnlyStoreData.storeId==storeItem.storeId)?'serviceItem-select bg-linear':'serviceItem'"
						 v-for="(storeItem, index) in storeList" :key="index" @click="setStore(storeItem)">
						 <image :src="storeItem.logoUrl" mode="scaleToFill"
							 style="height: 56px;width: 56px;margin-right: 10px;border-radius: 10px;" />
					 </view>
					 <view
						 style="border: 1px solid #d3d6dc; background-color: white;text-align:center;display:inline-block;height: 56px;width: 56px;margin-right: 10px;border-radius: 10px; overflow: hidden;"
						 @click="goFind()">
						 <image src="../../static/indexfind.png" mode="scaleToFill"
							 style="height: 24px;width: 24px;margin-top: 5px;" />
						 <view style="text-align: center;font-size:12px;color:#7C92A8;font-weight:700;">
							 发现..
						 </view>
					 </view>
				 </scroll-view>
			 </view>
			
			 <view v-if="storeList.length>0">
				<view class="name"  :class="[isAllStore==1 ? 'bg-00BC7A': 'bg-EAECEF']">
					<view class="name-1">
						<view class="name-1-left" :class="[isAllStore==1 ? 'color-fff': 'color-00BC7A']">Hi,{{ nickname }}(我)...</view>
						<image v-if="photo" :src="photo" mode="scaleToFill" class="name-1-right"></image>
						<image v-else src="../../static/default-head.svg" mode="scaleToFill" class="name-1-right"></image>
					</view>
					<view class="name-2" @click="toogleSelectType()">
						<view class="name-2-left" :class="[isAllStore==1 ? 'color-fff': 'color-7C92A8']">切换服务对象</view>
						<view class="name-2-right">
							<uni-icons type="down" size="20" :color="isAllStore==1? '#ffffff': '#00BC7A'"></uni-icons>
						</view>
					</view>
				</view>
				<view class="choose" :class="[fixed ? 'fixed':'', isAllStore==1 ? 'bg-00BC7A': 'bg-EAECEF']">
					<view class="choose-item" :class="[ fixed ? 'w1':'w2']">
						<view class="choose-1" @click="showSelectmealSeg()"><view class="choose-1-txt">{{searchOnlyStoreData.mealSeg}}</view><image src="../../static/index/1.svg"  style="width: 8px;height:8px;margin-left:4px" /></view>
						<view class="choose-1" @click="showShaiXuan()"><view class="choose-1-txt">筛选</view><image src="../../static/index/1.svg"  style="width: 8px;height:8px;margin-left:4px" /></view>
						<view class="choose-2" @tap="changeOne()">
							<image src="../../static/index/2.svg" :class="{ 'loader': !clickFlag  }" style="width: 20px;height:20px;margin-right:4px" />
							<view style="font-size: 28rpx;font-weight: bold;color: #00BC7A;">换一批</view>
						</view>
					</view>
					<view v-if="fixed" style="height:1px;width:100%" :class="[isAllStore==1 ? 'bg-00BC7A': 'bg-EAECEF']"></view>
				</view>
				 <view style="padding: 10px;" :class="[isAllStore==1 ? 'bg-00BC7A': 'bg-EAECEF']">
					 <view v-for="(food, idx) in foodList" :key="idx"
						 style="margin-bottom: 10px;background: #fff;
		 padding: 10px 0 10px 10px;position: relative;
		 border-radius: 10px;">

			 <view class="like" :class="{ 'like0': food.showLike  }">
						<view class="like-1" @tap="likeFood(food, 1)">
							<image src="../../static/kaixin.svg" class="like-1-img" />
							<view class="like-1-name">喜欢</view>
						</view>
						<view class="like-2"></view>
						<view class="like-1" @tap="likeFood(food, 0, idx)">
							<image src="../../static/beishang.svg" class="like-1-img" />
							<view class="like-1-name">不喜欢</view>
						</view>
						<view class="like-2"></view>
						<image class="like-3" @tap="cancelLike(food)" src="../../static/qingchu.svg" />
					</view>
						 <view style="display: flex;justify-content: flex-start;align-items: center;">
							 <view
								 style="min-width: 76px; display: inline-flex;height: 76px;width: 76px;background-color: #EAECEF;border-radius: 10px">
									 <wu-image
												 :show-loading="true"
												 :src="food.mainpictureInfo"
												 width="76px"
												 height="76px"
												 radius="10px"
												 @click="preview(food.mainpictureInfo)"
											 >
											 <template v-slot:loading>
												 <image src="../../static/capin_defaultImg.svg" mode="scaleToFill"
												 style="width: 76px;height: 76px;border-radius: 10px"  />
											   </template>
										 </wu-image>
							 </view>
							 <view
								 style="display: inline-flex;justify-content: flex-start;align-items: flex-start;flex-direction: column; height: 76px;margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
								 <view
									 style="padding-top:5px;font-size:16px;font-weight:700;max-width: 190px; overflow: hidden;white-space:nowrap;text-overflow: ellipsis;color:#2A537C">
									 {{food.foodName}}
								 </view>
								 <view
									 style="margin-top: 15px;white-space: nowrap;max-width: 360px; overflow:hidden;text-overflow:ellipsis; ">
									 <view v-for="(foodTag, indexTag) in food.tags" :key="indexTag"
										 style="max-width: 180px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display: inline-block;border:1px solid #EAECEF;color:#7C92A8;border-radius: 999px; padding: 3px; font-weight: 400;font-size: 12px;margin-right: 5px;">
										 {{foodTag}}
									 </view>
								 </view>
							 </view>
							 <view style="flex:1;display: flex;
							 align-items: center;justify-content: flex-end;" @tap="showLike(food)">
							 	<image src="../../static/sandian.svg" style="width: 24px;height:24px;margin-right: 6px" />
							 </view>
						 </view>
						 <view v-if="food.dishVOs && food.dishVOs.length > 0">
							 <scroll-view :scroll-x="true" :scrollbar="false"
								 style="white-space: nowrap;flex-wrap: nowrap; display: flex;justify-content: flex-start;align-items: center;padding-top: 10px;">
								 <view v-for="(dishItem, indexDish) in food.dishVOs" :key="indexDish"
									 style="display: inline-flex;background: #f4f6f7;justify-content: flex-start;align-items: center;max-width: 200px;height: 70px;border: 1px solid #F4F6F7;border-radius:10px;margin-right: 10px;">
											 <wu-image
												 :show-loading="true"
												 :src="dishItem.mainpictureInfo"
												 width="70px"
												 height="70px"
												 radius="10px"
												 @click="preview(dishItem.mainpictureInfo)"
											 >
											 <template v-slot:loading>
												 <image src="../../static/capin_defaultImg.svg" mode="scaleToFill"
												 style="width: 70px;height: 70px;border-radius: 10px"  />
											   </template>
										 </wu-image>
									 <view
										 style="margin-left: 5px;margin-right:5px;max-width: 130px;display: flex;justify-content: space-between;flex-direction: column;">
										 <view
											 style="color: #2E4964;font-size: 16px;font-weight: 400;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
											 {{dishItem.dishName}}
										 </view>
										 <view
											 style="margin-left:2px;margin-top: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
											 <view v-for="(tasteItem, indexTast) in dishItem.tasteInfos" :key="indexTast"
												 style="display: inline-block;padding: 3px; margin-right:2px;border-radius: 999px; border:1px solid #EAECEF;font-weight: 400;font-size:12px;color:#8292A2">
												 {{tasteItem}}
											 </view>
											</view>
										</view>
									</view>
								</scroll-view>
								
							</view>
					 </view>
					 <view :class="[isAllStore==1 ? 'color-fff': 'color-7C92A8']"  style="display: flex;
					 align-items: center;
					 justify-content: center;height: 40px;width:100%; font-size: 24rpx;">{{ dataLoading == 1 ? '数据准备中,请稍后...': '没有更多数据了' }}</view>
					 <view :class="[isAllStore==1 ? 'color-fff': 'color-7C92A8']"  style="display: flex;
					 align-items: center;
					 justify-content: center;height: 40px;width:100%; font-size: 24rpx;">本服务由「吃巧」提供技术支持。</view>
				 </view>
				 <view style="height: 90px;"></view>
			 </view>
	 
			 <view v-if="storeList.length==0">
				 <view style="padding: 0px 0px 0px 0px;">
					 <view v-if="serviceList.length==0">
						 <view style="text-align: center;color:#8292A2;padding-top: 25px;">
							 <!-- 无法提供服务 -->
						 </view>
					 </view>
				 </view>
				 <view class="no-service-foot">
					 <view class="no-service-foot-content">
						 <view class="foot-text">
							 <view style="color:#2E4964;font-size: 16px;font-weight: 700;">请先订阅膳食方案。</view>
							 <view style="color:#8292A2;font-size: 14px;font-weight: 400;">看看哪些膳食方案符合你的健康需求。
							 </view>
						 </view>
						 <view class="foot-button" @click="goFind()">去订阅</view>
					 </view>
				 </view>
			 </view>
		 </scroll-view>
		<uni-popup ref="popup3" type="center" background-color="white">
			<view class="pop3">
					<view style="background-color: white;border-radius: 5px;padding: 10px;">
						<view class="titai">
							<view class="titai-left">
								<view style="font-size: 14px;font-weight: 700;color:#8292A2">体态档案模式</view>
						<view style="margin-top: 5px;font-size: 14px;font-weight:400;color: #7F8C8D;">按订阅和体态档案提供服务。</view>
							</view>
							<view class="titai-right" @tap="newDoc()">+ 新档案</view>
						</view>
						<view
							:class="searchOnlyStoreData.postureIds.indexOf(item.id)>-1?'selectgroupandposture-box-item-select':'selectgroupandposture-box-item' "
							v-for="(item, indexPos) in posturesList" :key="indexPos" @click="selectPosture(item)">
							<view
								style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap; font-weight: 700;max-width: 180px; font-size: 16px;color:#2E4964">
								{{item.name}}
							</view>
							<image v-if="item.profilePhoto" :src="item.profilePhoto" style="width: 20px;height: 20px;margin-right: 4px;border-radius: 50%;" />
							<image v-else src="../../static/logo3.png" style="width: 20px;height: 20px;margin-right: 4px;border-radius: 50%;" />
							<view style="display: inline-flex;flex-grow: 1;justify-content: flex-end;">
								<view style="height: 24px;width: 24px;border-radius: 12px;border: 1px solid #00BC7A;"
									v-if="searchOnlyStoreData.postureIds.indexOf(item.id)<=-1"></view>
								<view
									style="display: flex;justify-content: center;align-items: center; height: 24px;width: 24px;border-radius: 12px;border: 1px solid #00BC7A;background-color: #00BC7A;"
									v-if="searchOnlyStoreData.postureIds.indexOf(item.id)>-1">
									<uni-icons type="checkmarkempty" size="20" color="white"></uni-icons>
								</view>
							</view>
						</view>
					</view>
					<view style="height:1px;width:calc(100% + 20px);margin:10px 0 10px -10px;background:#efefef"></view>
					<view style="background-color: white;border-radius: 5px;padding: 10px">
						<view class="titai">
							<view class="titai-left">
								<view style="font-size: 14px;font-weight: 700;color:#8292A2">多人/群组模式</view>
						<view style="margin-top: 5px;font-size: 14px;font-weight:400;color: #7F8C8D;">按群成员和订阅和体态提供服务。</view>
							</view>
							<view class="titai-right" @tap="newGroup()">+ 新群组</view>
						</view>
						<view
							:class="searchOnlyStoreData.groupId==item.id?'selectgroupandposture-box-item-select':'selectgroupandposture-box-item' "
							v-for="(item, indexG) in groupList" :key="indexG" @click="selectGroup(item)">
							<view style="display: flex;align-items: center;">
								<view
									style="margin-right:10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap; font-weight: 700;max-width: 180px; font-size: 16px;color:#2E4964">
									{{item.name}}
								</view>
								<view style="flex:1;display: flex;align-items: center;">
									<image v-for="(item, index) in item.photos" :key="index" :src="item" style="width: 26px;height:26px;border-radius: 50%;margin-left: -10px" />
								</view>
							</view>
							<view style="display: inline-flex;flex-grow: 1;justify-content: flex-end;">
								<view style="height: 24px;width: 24px;border-radius: 12px;border: 1px solid #00BC7A;"
									v-if="searchOnlyStoreData.groupId!=item.id"></view>
								<view
									style="display: flex;justify-content: center;align-items: center; height: 24px;width: 24px;border-radius: 12px;border: 1px solid #00BC7A;background-color: #00BC7A;"
									v-if="searchOnlyStoreData.groupId==item.id">
									<uni-icons type="checkmarkempty" size="20" color="white"></uni-icons>
								</view>
							</view>
						</view>
					</view>
				</view>
		</uni-popup>
		<uni-popup ref="popup" type="bottom" background-color="white">
			<view class="shaixuan-box">
				<scroll-view :scroll-y="true" :scrollbar="false"
					style="display: block; flex-grow: 1;overflow: scroll;">
					<view class="shaixuan-item-title">食材类型</view>
					<view class="shaixuan-item-content">
						<view v-for="(item, indexFood) in foodTypeOptionList" :key="indexFood"
							:class="shaiXuanInfo.foodType.indexOf(item.id)>-1?'shaixuan-item-content-tag-select':'shaixuan-item-content-tag'"
							@click="toggleFoodType(item.id)">
							{{item.name}}
						</view>
					</view>
					<view class="shaixuan-item-title">味型</view>
					<view class="shaixuan-item-content">
						<view v-for="(item, indexTa) in tasteOptionList" :key="indexTa"
							:class="shaiXuanInfo.flavorType.indexOf(item.id)>-1?'shaixuan-item-content-tag-select':'shaixuan-item-content-tag'"
							@click="toggleTaste(item.id)">
							{{item.name}}
						</view>
					</view>
					<view class="shaixuan-item-title">烹饪方式</view>
					<view class="shaixuan-item-content">
						<view v-for="(item, indexCook) in cookTypeOptionList" :key="indexCook"
							:class="shaiXuanInfo.cookingType.indexOf(item.id)>-1?'shaixuan-item-content-tag-select':'shaixuan-item-content-tag'"
							@click="toggleCookType(item.id)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view style="height: 150px;">
					<view
						style="height: 75px;border-top: 1px solid #EAECEF;display: flex;justify-content: center;align-items: center;">
						<view style="display: inline-flex;margin-right: 20px;">
							<view
								style="display: flex;align-items: center;justify-content: center; height: 46px;width:134px; border: 1px solid #EAECEF; background-color: white;font-size: 20px;font-weight: 400;border-radius: 10px;color:#34495E"
								@click="resetShaiXuan()">
								重置</view>
						</view>
						<view style="display: inline-flex;">
							<view
								style="display: flex;align-items: center;justify-content: center;height: 46px;width:134px;background-color: #00BC7A;font-size: 20px;font-weight: 400;border-radius: 10px;color:#FFFFFF"
								@click="confirmShaiXuan()">
								确定</view>
						</view>
					</view>
					<view
						style="height: 75px;border-top: 1px solid #EAECEF;display: flex;justify-content: center;align-items: center;">
						<view style="color:#7F8C8D;font-size: 16px;" @click="closeShaiXuan()">关闭</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" type="bottom" background-color="white">
			<view style="display: flex;justify-content: flex-end;color:#00BC7A;width:calc(100% - 20px);height:56rpx;align-items: center;padding: 10px;position: relative" @tap="confirm">
				<view style="position: absolute;left:50%;
				top: 50%;transform: translate(-50%,-50%);">请选择餐段</view>
				确定</view>
			<picker-view class="picker-view" @change="changeMealSeg">
				<picker-view-column>
					<view class="item" v-for="(item,indexMeal) in mealSegOptionList" :key="indexMeal">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
		<view class="backtop" @tap="goTop" :class="[fixed ? 'right20':'']">
			<image class="backtop-img" src="../../static/top.svg" mode=""></image>
			<text class="backtop-txt">顶部</text>
		</view>
		<mytabbar :active="0" :count="count"></mytabbar>
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex";
	import mytabbar from '../../components/my-tabbar/index.vue';
	import myheader from '../../components/header/index.vue';
	export default {
		components: {
			mytabbar,
			myheader
		},
		data() {
			return {
				type: 0, //0单店，1聚合
				screenHeight: 0,
				screenWidth: 0,
				statusBarHeight: "",
				serviceList: [],
				storeList: [],
				posturesList: [],
				groupList: [],
				foodList: [],
				foodTypeOptionList: [],
				tasteOptionList: [],
				dishTypeOptionList: [],
				cookTypeOptionList: [],
				mealSegOptionList: ["早餐", "午餐", "下午茶","晚餐","宵夜"],
				shaiXuanInfo: {
					foodType: [],
					flavorType: [],
					cookingType: [],
				},
				isAllStore: 0, //是否是聚合模式
				searchOnlyStoreData: {
					page: 1,
					pageSize: 6,
					isRefresh: 1,
					storeIds: [],
					storeId: 0,
					position: "",
					weatherName: "",
					weathertype: "",
					mealSeg: "",
					dishType: [],
					foodType: [],
					flavorType: [],
					cuisineType: [],
					cookingType: [],
					postureIds: [],
					groupId: 0,
					season: "",
					showSelectmealSegFlag: false,
				},
				// 2 没有更多数据了  1 加载数据中
				dataLoading: 1,
				previewImg: false,
				clickFlag: true,
				scrollTop: 0,
            	oldScrollTop:0,
				fixed:false,
				tempName:'早餐',
				headerHight: 95
			}
		},
		beforeMount() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			wx.getSystemInfo({
				success: res => {
					this.statusBarHeight = res.statusBarHeight + custom.height + custom.top - res
						.statusBarHeight;
				}
			});
			// #endif
			let selectQuery = uni.createSelectorQuery().in(this);
			selectQuery.selectAll('.my-header').boundingClientRect(rect => {
				this.headerHight = rect[0].height;
			}).exec()
			this.$forceUpdate();
		},
		computed: {
			...mapGetters(["nickname", "photo", "count"])
		},
		onShareAppMessage(res) {
		
			return {
				title: '好友分享了吃巧【吃巧Ai营养师】',
				path: '/pages/index/index',
				imageUrl: "https://www.chideqiao.com/api/images/myhm-static/share_1.png"

			};
	},
		async onLoad() {
			uni.showToast({
				icon: 'none',
				title: '专属服务马上准备完成，请稍候...',
			});
			let now = new Date().getTime();
			let date1 = new Date().setHours(4, 0, 0, 0);
			let date2 = new Date().setHours(9, 30, 59, 0);
			let date3 = new Date().setHours(9, 31, 0, 0);
			let date4 = new Date().setHours(14, 30, 59, 0);
			let date5 = new Date().setHours(14, 31, 0, 0);
			let date6 = new Date().setHours(17, 0, 59, 0);
			let date7 = new Date().setHours(17, 1, 0, 0);
			let date8 = new Date().setHours(21, 59, 59, 0);
			let date9 = new Date().setHours(22, 0, 0, 0);
			let date10 = new Date().setHours(3, 59, 59, 0);
			if (now >= date1 && now <= date2) {
				this.searchOnlyStoreData.mealSeg = "早餐"
			} else if (now >= date3 && now <= date4) {
				this.searchOnlyStoreData.mealSeg = "午餐"
			} else if (now >= date5 && now <= date6) {
				this.searchOnlyStoreData.mealSeg = "下午茶"
			} else if (now >= date7 && now <= date8) {
				this.searchOnlyStoreData.mealSeg = "晚餐"
			} else if (now >= date9 || now <= date10 ) {
				this.searchOnlyStoreData.mealSeg = "宵夜"
			}
			
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			this.screenHeight = systemInfo.screenHeight;
			this.screenWidth = systemInfo.windowWidth;
		},
		async onShow() {
			if (!this.previewImg) {
				// 避免 图片放大再次调用onshow
				if(this.nickname) {
					
					await this.getStoreList();
					await this.getPostures();
					if (this.storeList.length > 0) {
						this.searchOnlyStoreData.storeId = this.storeList[0].storeId;
					}
					if (this.posturesList.length > 0) {
						this.searchOnlyStoreData.postureIds = [];
						this.searchOnlyStoreData.postureIds.push(this.posturesList[0].id);
					}
					this.searchOnlyStoreData.groupId = 0;
					await this.getGroupDataList();
					if (this.groupList.length > 0 && this.searchOnlyStoreData.postureIds.length == 0) {
						this.searchOnlyStoreData.groupId = this.groupList[0].id;
					}
					await this.getSingleStoreAnalysisData("init");
				}
				
				this.$forceUpdate();
				uni.hideLoading();
			}
		},
		methods: {
			showLike(food) {
				food.showLike = true
			},
			cancelLike(food) {
				food.showLike = false
			},
			async likeFood(food, flag, idx) {
				let res = await this.$H.put('portal/prefer/update', {
					type: 1,
					mainId: food.foodId,
					isLike: flag
				});
				
				if (res.code == 0) {
					uni.showToast({
						title: '操作成功',
						icon:'none'
					})
					if (flag == 0) {
						this.foodList.splice(idx, 1)
					}
					food.showLike = false
				}
				
			},
 			preview(url) {
				let that = this
				uni.previewImage({
					urls: [url],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
					},
					complete(){
						that.previewImg = true
					}
				});
			},
			
			async onBottom() {
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				await this.getSingleStoreAnalysisData("nextPage");
				uni.hideLoading();
			},
			async getStoreList() {
				let res = await this.$H.get('portal/sub/searchStores');
				if (res.code == 0) {
					this.storeList = res.data;
				}
			},
			async getPostures() {
				let res = await this.$H.get("portal/posture/searchPostures");
				if (res.code == 0) {
					this.posturesList = res.data;
				}
			},
			async getGroupDataList() {
				this.$H.get("portal/group/searchGroups").then((res => {
					if (res.code == 0) {
						this.groupList = res.data;
					}
				}));
			},
			async changeOne() {
				uni.showToast({
					icon: 'none',
					title: '专属服务马上准备完成，请稍候...',
				});
				if (this.clickFlag) {
					this.clickFlag = false
					await this.getSingleStoreAnalysisData("init");
					setTimeout(() => {
						this.clickFlag = true
					}, 2000)
				}
			},
			async getSingleStoreAnalysisData(type) {
				console.log(type, 'type=====')
				let postData = {};
				if (type == "init") {
					this.dataLoading = 1
					this.searchOnlyStoreData.page = 1;
					this.searchOnlyStoreData.isRefresh = 1;
				}
				if (type == "nextPage") {
					this.searchOnlyStoreData.page = this.searchOnlyStoreData.page + 1;
					this.searchOnlyStoreData.isRefresh = 0;
				}
				if (this.dataLoading == 2) {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					})
					return
				}
				// 非聚合模式
				if (this.isAllStore == 0) {
					postData.page = this.searchOnlyStoreData.page;
					postData.pageSize = this.searchOnlyStoreData.pageSize;
					postData.isRefresh = this.searchOnlyStoreData.isRefresh;
					postData.storeId = this.searchOnlyStoreData.storeId;
					postData.position = this.searchOnlyStoreData.position;
					postData.weatherName = this.searchOnlyStoreData.weatherName;
					postData.weathertype = this.searchOnlyStoreData.weathertype;
					postData.mealSeg = this.searchOnlyStoreData.mealSeg;
					postData.dishType = this.searchOnlyStoreData.dishType;
					postData.foodType = this.searchOnlyStoreData.foodType;
					postData.flavorType = this.searchOnlyStoreData.flavorType;
					postData.cuisineType = this.searchOnlyStoreData.cuisineType;
					postData.cookingType = this.searchOnlyStoreData.cookingType;
					postData.postureIds = this.searchOnlyStoreData.postureIds;
					postData.groupId = this.searchOnlyStoreData.groupId;
					postData.season = this.searchOnlyStoreData.season;
					let res = await this.$H.post("portal/sub/singleStoreAnalysis", postData)
					console.log(res, 'res----')
					if (type == "init") {
						if (res.code == 0 && res.data.records != null) {
							for (let i = 0; i < res.data.records.length; i++) {
								res.data.records[i].showLike = false
								if (res.data.records[i].dishVOs) {

									res.data.records[i].dishVOs = res.data.records[i].dishVOs.slice(0, 9)
								}
							}
							this.foodList = res.data.records;
						} else {
							this.foodList = []
							this.dataLoading = 2
						}
					}
					if (type == "nextPage") {
						if (res.code == 0 && res.data.records != null) {
							for (let i = 0; i < res.data.records.length; i++) {
								// this.foodList.push(res.data.records[i])
								res.data.records[i].showLike = false
								if (res.data.records[i].dishVOs) {

									res.data.records[i].dishVOs = res.data.records[i].dishVOs.slice(0, 9)
								}
								this.$set(this.foodList, this.foodList.length, res.data.records[i])
							}
							if (res.data.records.length < postData.pageSize) {
								this.dataLoading = 2
							}
						} else {
							this.dataLoading = 2
							if (this.searchOnlyStoreData.page > 1) {
								this.searchOnlyStoreData.page = this.searchOnlyStoreData.page - 1;
							}
						}
					}
				} else {
					// 聚合模式
					postData.page = this.searchOnlyStoreData.page;
					postData.pageSize = this.searchOnlyStoreData.pageSize;
					postData.isRefresh = this.searchOnlyStoreData.isRefresh;
					postData.storeIds = this.searchOnlyStoreData.storeIds;
					postData.position = this.searchOnlyStoreData.position;
					postData.weatherName = this.searchOnlyStoreData.weatherName;
					postData.weathertype = this.searchOnlyStoreData.weathertype;
					postData.mealSeg = this.searchOnlyStoreData.mealSeg;
					postData.dishType = this.searchOnlyStoreData.dishType;
					postData.foodType = this.searchOnlyStoreData.foodType;
					postData.flavorType = this.searchOnlyStoreData.flavorType;
					postData.cuisineType = this.searchOnlyStoreData.cuisineType;
					postData.cookingType = this.searchOnlyStoreData.cookingType;
					postData.postureIds = this.searchOnlyStoreData.postureIds;
					postData.groupId = this.searchOnlyStoreData.groupId;
					postData.season = this.searchOnlyStoreData.season;
					let res = await this.$H.post("portal/sub/mulsingleStoreAnalysis", postData)
					if (type == "init") {
						if (res.code == 0 && res.data.records!= null) {
							for (let i = 0; i < res.data.records.length; i++) {
								res.data.records[i].showLike = false
								if (res.data.records[i].dishVOs) {

									res.data.records[i].dishVOs = res.data.records[i].dishVOs.slice(0, 9)
								}
							}
							this.foodList = res.data.records
						} else {
							this.foodList = []
							this.dataLoading = 2
						}
					}
					if (type == "nextPage") {
						if (res.code == 0 && res.data.records!= null) {
							for (let i = 0; i < res.data.records.length; i++) {
								// this.foodList.push(res.data.records[i])
								res.data.records[i].showLike = false
								if (res.data.records[i].dishVOs) {

									res.data.records[i].dishVOs = res.data.records[i].dishVOs.slice(0, 9)
								}
								this.$set(this.foodList, this.foodList.length, res.data.records[i])
							}
							if (res.data.records.length < postData.pageSize) {
								this.dataLoading = 2
							}
						} else {
							this.dataLoading = 2
							if (this.searchOnlyStoreData.page > 1) {
								this.searchOnlyStoreData.page = this.searchOnlyStoreData.page - 1;
							}
						}
					}
				}
			},
		
			showSelectmealSeg() {
				this.$refs.popup2.open();
				this.$refs.popup.close();
			},
			async showShaiXuan() {
				this.$refs.popup2.close()
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				//{id:"1",food_type:"xxxx"}
				if (this.foodTypeOptionList.length == 0) {
					let res = await this.$H.getToB("manage/basic/foodTypeData");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.foodTypeOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				//菜品类型暂无接口,pass
				// if (this.dishTypeOptionList.length == 0) {

				// }
				// {id:"1",taste_name:"xxx"}
				if (this.tasteOptionList.length == 0) {
					let res = await this.$H.getToB("manage/basic/getAllTastes");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.tasteOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				if (this.cookTypeOptionList.length == 0) {
					let res = await this.$H.postToB("manage/basic/getAllCookings");
					if (res.code == 0) {
						for (let i = 0; i < res.data.length; i++) {
							this.cookTypeOptionList.push({
								"id": Number(res.data[i].id),
								"name": res.data[i].name
							})
						}
					}
				}
				uni.hideLoading();
				this.$refs.popup.open();
			},
			closeShaiXuan() {
				this.$refs.popup.close();
			},
			scroll (e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
				if (this.oldScrollTop > 230) {
					this.fixed = true
				} else {
					this.fixed = false
				}
			},
			goTop (e) {
				//视图会发生重新渲染
				this.scrollTop = this.oldScrollTop
				//当视图渲染结束 重新设置为0
				this.$nextTick(() =>{
					this.scrollTop = 0
					this.fixed = false
				}, 1000);
			},
			async confirmShaiXuan() {
				this.searchOnlyStoreData.foodType = this.shaiXuanInfo.foodType;
				this.searchOnlyStoreData.flavorType = this.shaiXuanInfo.flavorType;
				this.searchOnlyStoreData.cookingType = this.shaiXuanInfo.cookingType;
				this.$refs.popup.close();
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				await this.getSingleStoreAnalysisData("init");
				uni.hideLoading();
			},
			resetShaiXuan() {
				this.shaiXuanInfo = {
					foodType: [],
					flavorType: [],
					cookingType: [],
				}
				this.$forceUpdate();
			},
			toggleTaste(id) {
				let index = this.shaiXuanInfo.flavorType.indexOf(id);
				if (index > -1) {
					this.shaiXuanInfo.flavorType.splice(index, 1);
				} else {
					this.shaiXuanInfo.flavorType.push(id)
				}
				this.$forceUpdate();
			},
			toggleCookType(id) {
				let index = this.shaiXuanInfo.cookingType.indexOf(id);
				if (index > -1) {
					this.shaiXuanInfo.cookingType.splice(index, 1);
				} else {
					this.shaiXuanInfo.cookingType.push(id)
				}
				this.$forceUpdate();
			},
			toggleFoodType(id) {
				let index = this.shaiXuanInfo.foodType.indexOf(id);
				if (index > -1) {
					this.shaiXuanInfo.foodType.splice(index, 1);
				} else {
					this.shaiXuanInfo.foodType.push(id)
				}
				this.$forceUpdate();
			},
		
			async changeMealSeg(val) {
				this.tempName = this.mealSegOptionList[val.detail.value[0]]
			},
			async confirm () {
				this.searchOnlyStoreData.mealSeg = this.tempName
				this.$refs.popup2.close()
				uni.showToast({
					title: '正汇总全部订阅服务数据，请稍候...',
					icon: 'none'
				});
				await this.getSingleStoreAnalysisData("init");
				uni.hideLoading();
			},
			async setStore(storeItem) {
				this.isAllStore = 0;
				this.searchOnlyStoreData.storeId = storeItem.storeId;
				this.$forceUpdate();
				uni.showToast({
					title: '正汇总全部订阅服务数据，请稍候...',
					icon: 'none'
				});
				await this.getSingleStoreAnalysisData("init");
				uni.hideLoading();
			},
			async setAllStore() {
				this.isAllStore = 1;
				this.searchOnlyStoreData.storeIds = [];
				for (let i = 0; i < this.storeList.length; i++) {
					this.searchOnlyStoreData.storeIds.push(this.storeList[i].storeId);
				}
				this.$forceUpdate();
				uni.showToast({
					title: '正汇总全部订阅服务数据，请稍候...',
					icon: 'none'
				});
				await this.getSingleStoreAnalysisData("init");
				uni.hideLoading();
			},
			async toogleSelectType() {
				this.$refs.popup3.open()
			},
			async selectPosture(item) {
				this.searchOnlyStoreData.groupId = 0;
				let index = this.searchOnlyStoreData.postureIds.indexOf(item.id);
				if (index > -1) {
					this.searchOnlyStoreData.postureIds.splice(index, 1);
				} else {
					this.searchOnlyStoreData.postureIds.push(item.id);
				}
				this.$refs.popup3.close()
				uni.showToast({
					title: '正汇总全部订阅服务数据，请稍候...',
					icon: 'none'
				});
				await this.getSingleStoreAnalysisData("init");
				this.$forceUpdate();
			},
			async selectGroup(item) {
				this.searchOnlyStoreData.postureIds = [];
				this.searchOnlyStoreData.groupId = item.id;
				this.$refs.popup3.close()
				uni.showToast({
					title: '正汇总全部订阅服务数据，请稍候...',
					icon: 'none'
				});
				await this.getSingleStoreAnalysisData("init");
				this.$forceUpdate();
			},
			goFind() {
				uni.switchTab({
					url: "/pages/find/index"
				});
			},
			newDoc() {
				uni.navigateTo({
					url: "/pages/my/physiqueArchives"
				});
				this.$refs.popup3.close()
			},
			newGroup() {
				uni.navigateTo({
					url: "/pages/my/groupList"
				});
				this.$refs.popup3.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.backtop {
			position: fixed;
			right: -100px;
			bottom: 168px;
			background: #00BC7A;
			border-radius: 999px;
			padding:10px;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all .3s;
			&-img {
				width:24px;
				height:24px
			}
			&-txt {
				color: #fff;
				font-size: 16px;
				font-weight: 500;
			}
	}
	.right20 {
		right:20px!important;
	}
.loader {
  width: 40px; /* 加载器的宽度 */
  height: 40px; /* 加载器的高度 */
  animation: spin 2s linear infinite; /* 应用动画 */
}
 
@keyframes spin {
  0% {
    transform: rotate(0deg); /* 动画起始点 */
  }
  100% {
    transform: rotate(360deg); /* 动画结束点 */
  }
}
	.serviceItem {
		display: inline-block;
		height: 56px;
		width: 56px;
		margin-right: 5px;
		border-radius: 10px;
		overflow: hidden;
		border: 1px solid #EFEFEF;
    background-color: white;
	}

	.serviceItem-select {
		display: inline-block;
		height: 56px;
		width: 56px;
		margin-right: 5px;
		border-radius: 10px 10px 0px 0px;
		overflow: hidden;
		padding: 3px;
		margin-bottom: -4px;
	}

	.no-service-foot {
		position: absolute;
		bottom: 60px;
		padding: 0rpx 10px 0rpx 10px;
		height: 82px;
		width: 100%;
		box-sizing: border-box;

		.no-service-foot-content {
			background-color: white;
			border-radius: 5px;
			color: red;
			height: 100%;
			padding: 0px 20px 0px 20px;
			font-size: 14px;
			text-align: center;
			vertical-align: middle;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 50px;

			.foot-text {
				display: inline-flex;
				justify-content: flex-start;
				flex-direction: column;
				align-items: flex-start;
			}

			.foot-button {
				cursor: pointer;
				color: #FFFFFF;
				padding: 10px;
				background-color: #00BC7A;
				border-radius: 5px;
				font-size: 16px;
				font-weight: 900;
				border-radius: 30px;
			}
		}
	}

	.shaixuan-box {
		background-color: white;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		max-height: 75vh;
	}

	.shaixuan-item-content {
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 0px 10px 0px 10px;
	}

	.shaixuan-item-content-tag {
		margin: 5px 5px 5px 5px;
		display: inline-block;
		padding: 5px 8px 5px 8px;
		background-color: white;
		color: #00BC7A;
		border: 1px solid #EAECEF;
		border-radius: 5px;
	}

	.shaixuan-item-content-tag-select {
		margin: 5px 5px 5px 5px;
		display: inline-block;
		padding: 5px 8px 5px 8px;
		background-color: #00BC7A;
		border: 1px solid #00BC7A;
		color: white;
		border-radius: 5px;
	}

	.shaixuan-item-title {
		text-align: center;
		color: #7F8C8D;
		font-size: 14px;
		font-weight: 350;
	}

	.selectgroupandposture-box-item {
		margin-top: 10px;
		border: 1px solid #EAECEF;
		padding: 10px 10px 10px 10px;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.selectgroupandposture-box-item-select {
		margin-top: 10px;
		padding: 10px 10px 10px 10px;
		border-radius: 5px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// background-color: #00BC7A;
		border: 1px solid rgba(26, 188, 156, 0.1);
		background: rgba(26, 188, 156, 0.1);
	}

	.picker-view {
		width: 100%;
		height: 300rpx;
		background-color: #EFEFEF;
	}

	.picker-view .item {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #8292A2;
		font-size: 18px;
		font-weight: bold;
	}
	.pop3 {
		width: 670rpx;
		border-radius: 20rpx;
		background: #fff;
		padding: 20rpx;
		max-height: 70vh;
		overflow: scroll;
	}
	.titai {
		display: flex;
		&-left {
			display: flex;
			flex-direction: column;
			flex:1;
			justify-content: space-evenly;
		}
		&-right {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: rgba(26, 188, 156, 1)
		}
	}
	
	.like {
		position: absolute;
		top: 0;
		right:-500px;
		transition: all 1s;
		width:calc(100% - 80px);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx;
		background: #00BC7A;
		border-radius: 10px;
		margin-top:10px;
		&-1 {
			display: flex;
			align-items: center;
			&-img {
				width:20px;
				height:20px;
				margin-right:4px;
			}
			&-name {
				font-size: 32rpx;
				color: #fff;
				font-weight: 600;
			}
		}
		&-2 {
			width:1px;
			height: 16px;
			background: #fff
		}
		&-3 {
			width:20px;
				height:20px;
		}
	}
	.like0 {
		right: 10px;
		z-index: 100;
	}
	.w2 {
		width: calc(100% - 40rpx);
		border-radius: 10px;
		margin-left: 20rpx;
	}
	.w1 {
		width: 100%;
		border-radius: 0!important;
	}
	.fixed {
		position: sticky;
		left: 0;
		top: -1px;
		z-index: 100;
	}
	.choose {
		transition: all .3s;
		height: 88rpx;
		&-item {
			background: #fff;
			height: 100%;
			display: flex;
			align-items: center;
			border-radius: 10px;
		}
		&-1 {
			display: flex;
			align-items: center;
			margin-left: 10px;
			font-size: 16px;
			font-weight: 400;
			color: #7C92A8;
		}
		&-2 {
			flex: 1;
			display: flex;
			margin-right: 10px;
			align-items: center;
			justify-content: flex-end;
		}
	}
	.name {
		display: flex;
		align-items: center;
		height: 92rpx;
		width: calc(100% - 20px);
		padding: 0 10px;
		justify-content: space-between;
		margin-top:-1px;

		&-1 {
			display: flex;
			align-items: center;
			&-left {
				flex: 1;
				font-size: 32rpx;
				font-weight: bold;
				max-width: 70%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			&-right {
				width: 32px;
				height: 32px;
				border-radius: 50%;
				margin-left: 10rpx;
			}
		}
		&-2 {
			display: flex;
			align-items: center;
			&-left {
				font-size: 14px;
				margin-right:10px;
			}
			&-right {
				display: flex;
				justify-content: flex-end;
			}
		}
	}
	.bg-00BC7A {
		background-color: #00BC7A;
	}
	.bg-EAECEF {
		background-color: #f4f7fc;
	}
	.bg-ffffff {
		background-color: #ffffff;
	}
	.bg-linear {
		background: linear-gradient(180deg, #00BC8D 0%, #EAECEF 100%);

	}
	.color-fff {
		color: #fff;
	}
	.color-2E4964 {
		color: #2E4964
	}
	.color-8292A2 {
		color: #8292A2
	}
	.color-00BC7A {
		color: #00BC7A
	}
	.color-FBFF00 {
		color:#FBFF00
	}
	.color-E67E22 {
		color: #E67E22
	}
	.color-7C92A8 {
		color: #7C92A8
	}
	.tishi {
		width: calc(100% - 20px);
		padding: 10px;
		&-1 {
			font-size: 32rpx;
			font-weight: bold;
			color: #2A537C;
		}
		&-2 {
			font-size: 14px;
			color: #7C92A8;
		}
		&-3 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			&-left {
				font-size: 14px;
				font-weight: bold;
			}
			&-right {
				display: flex;
				align-items: center;
				&-1 {
					font-size: 14px;
				}
				&-2 {
					height: 14px;
					width: 1px;
					background-color: rgba(130, 146, 162, 0.5);
					margin: 0 10rpx;
				}
			}
		}
	}
	.tuijian {
		display: flex;
		width: 100%;
		border-bottom: 1px solid #EBEFF6;
		&-item {
			flex:1;
			padding:10px;
			&-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-1 {
					font-size: 16px;
					font-weight: 700;
					color: #2A537C;
				}
				&-2 {
					font-size: 14px;
					font-weight: 400;
					color: #00BC7A;
				}
			}
			&-bottom {
				display: flex;
				margin-top: 10px;
				&-1 {
					width: 76px;
					height:76px;
					margin-right:5px;
				}
				&-2 {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					&-1 {
						color: #2A537C;
						font-size: 14px;
						font-weight: 700;
					}
					&-2 {
						color: #7C92A8;
						font-size: 12px;
						font-weight: 400;
					}
					&-4 {
						display: -webkit-box;
						  -webkit-box-orient: vertical;
						  -webkit-line-clamp: 2; /* 限制文本显示的行数 */
						  overflow: hidden;
						  text-overflow: ellipsis;
						  color: #2A537C;
						  font-size: 14px;
						  font-weight: 700;
						  max-width: 80px;
					}
					&-3 {
						background-color: #00BC8D;
						border-radius: 10px;
						font-size: 12px;
						font-weight: 700;
						width:68px;
						height:26px;
						text-align: center;
						line-height: 26px;
						color:#fff;
					}
				}
			}
		}
	}
	.yinshi {
		width: calc(100% - 60rpx);
		margin-left: 20rpx;
		padding: 5px;
		background: #00BC8D;
		border-radius: 10px;
		color:#fff;
		&-1 {
			padding: 14px 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 72px;
			&-1 {
				font-size: 19px;
				font-weight: 700;
			}
			&-2 {
				font-size: 14px;
				font-weight: 500;
			}
		}
		&-box {
			width: calc(100% - 10rpx);
			margin-left: 5rpx;
			height: 50px;
			align-items: center;
			background-color: #01A87F;
			display: flex;
			border-radius: 10px;
			&-line {
				background-color: rgba(255,255,255,0.2);
				width:1px;
				height: 34px;
			}
			&-item {
				display: flex;
				align-items: center;
				flex:1;
				flex-direction: column;
				align-items: flex-start;
				&-1 {
					font-size: 16px;
					font-weight: 700;
					margin-left:10px;
				}
				&-2 {
					font-size: 12px;
					margin-left:10px;
				}
			}
		}
	}
</style>